<template>
  <div>
    <ul class="infinite-list clearfix">
      <li v-for="(item, index) in datasets" :key="index" class="infinite-list-item">
        <!-- <div @click="currentSelect(item)" :class="['adorn-checkbox',  {'checkbox-false': !item.ischecked},{'checkbox-true': item.ischecked}]"></div> -->
        <div class="" @click="detailDataset(item)">
          <v-image class="dimg" :src="item.avatarPath" />
          <div class="datas-box">
            <p class="pall datasname">
              {{ item.name }}
            </p>
            <p class="pall pcontents" :title="item.desc">
              {{ item.desc }}
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getExperimentDetail } from '@/api/notebook'
import { getDataSetDetail } from "@/api/dataset";
export default {
  name: 'plugInDataset',
  data() {
    return {
      showSelectDialog: false,
      datasets: this.$route.query.datasets,
      dataset_id: null
    }
  },

  methods: {
    async getData() {
      if (this.$route.query.id) {
        let res = await getExperimentDetail({ id: this.$route.query.id })
        this.datasets = []
        for (let data of res.data.dataset_list) {
          console.log('data', data)
          let res2 = await getDataSetDetail(data.dataset_id)
          this.datasets.push(res2.data)
        }

      }
    },
    detailDataset(item) {
      this.dataset_id = item.dataset_id
      let query = { id: item.id }
      console.log(item)
      console.log(item.dataset_id)
      let newUrl = this.$router.resolve({
        path: '/dataset/code',
        query
      })
      window.open(newUrl.href, "_blank");

    }
  },
  mounted() {
    this.getData()
  },
  destroyed() {
  }
}
</script>

<style lang="less" scoped>
.myself-dataset-checkbox {
  display: flex;

  /deep/ .el-checkbox__input {
    padding-top: 28px;
  }
}

.infinite-list {
  min-height: 380px;
}

.infinite-list-item {
  margin-bottom: 20px;
  float: left;
  //width: 496px;
  width: 992px; //数据集改版后调整为一行一个
}

.elrowgutter {
  /deep/.el-button--default {
    margin-left: 100px;
    width: 80%;
    background-color: #f5f7fa;
    color: #1e2480;
    margin-bottom: 20px;
  }

  /deep/.el-form-item__label {
    text-align: right;
    padding-right: 30px;
  }
}

.delnode {
  margin-left: 73%;
}

.run-model-title {
  color: #303133;
}

.run-model-table {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 0 8px;
  margin-top: 6px;

  .r-m-box {
    border-top: 1px solid #e8e8e8;
    height: 38px;
    line-height: 38px;

    .r-m-name {
      float: left;
      width: 148px;
      padding-left: 14px;
    }

    .r-m-product {
      float: left;
      width: 250px;
    }

    .r-m-command {
      float: left;
      width: 120px;

      .popover {
        cursor: pointer;

        i {
          font-size: 16px;
          color: #4285F4;
        }
      }
    }

    .r-m-number {
      float: left;
    }
  }

  .no-border {
    border: 0;
  }
}

.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
}

.checkbox-true {
  // background: url(~@/assets/img/checkbox-true.jpg) no-repeat;
  background-size: 18px 18px;
}

.checkbox-false {
  // background: url(~@/assets/img/checkbox-false.jpg) no-repeat;
  background-size: 18px 18px;
}

.adorn-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  float: left;
  margin-top: 20px;
  margin-right: 10px;
}

.dimg {
  width: 123px;
  height: 75px;
  float: left;
}

.datas-box {
  float: left;
  width: 296px;

  .datasname {
    vertical-align: top;
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box; //将元素设为盒子伸缩模型显示
    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
    -webkit-line-clamp: 1;
  }

  .pcontents {
    margin: 15px 0 0 5px;
    font-size: 14px;
    color: #606266;
    line-height: 24px;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .pall {
    overflow: hidden;
    margin-left: 5px;
  }
}

.version-box {
  float: right;

  .sb {
    /deep/.el-input.el-input__inner {
      border-color: #4285f4 !important;
      font-size: 12;
    }
  }
}

.dataset-tags-box {
  // width: 240px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;

  .dataset-addr {
    padding-left: 10px;
    line-height: 30px;
    float: left;
  }

  .delstr {
    color: red;
  }
}

.dataset-tags {
  // display: block;
  // max-width: 240px;
  float: left;

  /deep/ .el-tag__close {
    float: left;
    margin-top: 6px;
  }

  .dataset-tags-word {
    // display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 140px;
    float: left;
  }
}
</style>
